<template>
	<view class="details">
		<view @click="whole.onClick" id="onClick"></view>
		<!-- <web-view :src="host + '/index/index/index?id=' + mid"></web-view> -->
		<view class="temp temp1" v-if="tid==1">
			<image v-for="(item, index) in info.info.imgs" :src="host + item"></image>
		</view>

		<view class="temp temp2" v-if="tid==2" :style="{'padding': info.info.pagepd + 'px'}">
			<image v-for="(item, index) in info.info.imgs" :src="host + item"
				:style="{'width': imgWidth + 'px', 'margin': info.info.imgpd + 'px'}"></image>
		</view>

		<view class="temp temp3" v-if="tid==3">
			<!-- <u-parse :content="info.info.article_content" :imageProp="imageProp" /> -->
			
			<rich-text :nodes="info.info.article_content"></rich-text>
		</view>
		
		<unitv-image class="wxlogo" :src="host + '/api/init/applet?cid=' + cid"></unitv-image>
	</view>
</template>

<script>
	var wv; //计划创建的webview
	var _self;
	// import uParse from '@/components/gaoyia-parse/parse.vue'
	import {
		getDetailsData,
	} from '@/api/app.js';
	export default {
		components: {
			// uParse
		},
		data() {
			return {
				scrollTop: 0,
				mid: null,
				cid: null,
				info: null,
				height: 0,
				elHeight: 0,
				imageProp: {
					domain: this.host
				}
			}
		},
		methods: {
			keyCodeClick(keyCode) {
				let obj = uni.createSelectorQuery().select('.temp')
				obj.boundingClientRect(function(data) {
					_self.elHeight = data.height
				}).exec()
				// 上下滚动，一次滚动半个屏幕
				if (keyCode == 'KeyDown') {
					// wv.evalJS('window.scrollBy({top:' + this.height / 2 + ', behavior: "smooth"})')
					this.scrollTop += this.height / 2
					if (this.scrollTop > this.elHeight - this.height) {
						this.scrollTop = this.elHeight - this.height
						uni.showToast({
							title: "已经到底部了",
							icon: "none"
						})
					}
					uni.pageScrollTo({
						scrollTop: this.scrollTop,
						duration: 300
					});
				} else if (keyCode == 'KeyUp') {
					// wv.evalJS('window.scrollBy({top:' + -this.height / 2 + ', behavior: "smooth"})')
					this.scrollTop -= this.height / 2
					if (this.scrollTop < 0) {
						this.scrollTop = 0
						uni.showToast({
							title: "已经到顶部了",
							icon: "none"
						})
					}
					uni.pageScrollTo({
						scrollTop: this.scrollTop,
						duration: 300
					});
				}
			},
		},
		onLoad(e) {
			_self = this
			this.mid = e.mid
			this.cid = e.cid
			this.height = uni.getSystemInfoSync().windowHeight
			getDetailsData(e)
				.then(res => {
					if (res.code) {
						this.info = res.data
						
						// console.log("富文本内容", this.info.info.article_content)
					}
				})
				.catch(err => {});
		},
		computed: {
			tid() {
				if (this.info) {
					return this.info.temp_id
				} else {
					return 0
				}
			},
			imgWidth() {
				if (this.tid == 1) {
					return uni.upx2px(750)
				} else if (this.tid == 2) {
					return (uni.upx2px(750) - this.info.info.column * 2 * this.info.info.imgpd - this.info.info.pagepd *
						2) / this.info.info.column
				} else {
					return 0
				}
			}
		},
		onReady() {
			this.track()
			// // #ifdef APP-PLUS
			// //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
			// var currentWebview = this.$scope.$getAppWebview()
			// setTimeout(function() {
			// 	wv = currentWebview.children()[0]
			// 	// 添加右侧悬浮小程序图标
			// 	let js = `var img = document.createElement("img");`
			// 	js += `img.src = "` + _self.host + `/api/init/applet?cid=` + _self.cid + `";`
			// 	// console.log("脚本", js)
			// 	js += `img.style.width="` + uni.upx2px(60) + `px";img.style.height="` + uni.upx2px(60) +
			// 		`px";img.style.position="fixed";img.style.top="calc(50% - ` + uni.upx2px(60) / 2 +
			// 		`px)";img.style.right="10px";`
			// 	js += `var boxObj = document.body;`
			// 	js += `boxObj.appendChild(img);`
			// 	// console.log("脚本", js)
			// 	wv.evalJS(js)
			// }, 500); //如果是页面初始化调用时，需要延时一下
			// // #endif
		},
		onShow() {
			setTimeout(function() {
				let obj = uni.createSelectorQuery().select('.temp')
				obj.boundingClientRect(function(data) {
					_self.elHeight = data.height
				}).exec()
			}, 1000)
		}
	}
</script>
<script module="whole" lang="renderjs">
	let code;
	let KeyName = {
		19: 'KeyUp',
		38: 'KeyUp', //Keyboard
		20: 'KeyDown',
		40: 'KeyDown', //Keyboard
		21: 'KeyLeft',
		37: 'KeyLeft', //Keyboard
		22: 'KeyRight',
		39: 'KeyRight', //Keyboard
		23: 'KeyEnter',
		13: 'KeyEnter', //Keyboard
		4: 'KeyBack',
		18: 'KeyBack', //Keyboard Alt键
		27: 'KeyBack', //Keyboard ESC
		24: 'KeyBack', //Keyboard ESC
		66: 'KeyEnter',
		111: 'KeyBack'
	};
	export default {
		mounted() {
			//全局监听按键输入
			window.document.onkeydown = function(evt) {
				evt = evt || window.event;

				var KeyCode = evt.which || evt.keyCode;
				//document.getElementById("onClick").click();
				code = KeyName[KeyCode];
				if (code != 'KeyBack') {
					evt.preventDefault();
				}
				if (code != undefined) {
					document.getElementById("onClick").click();
				}
			}
		},
		methods: {
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('keyCodeClick', code);
			}
		}
	}
</script>
<style lang="scss" scoped>
	.details {
		background-color: #ffffff;
		min-height: 100vh;

		.temp1 {
			width: 100%;

			image {
				width: 100%;
			}
		}

		.temp2 {
			width: 100%;
		}

		.temp3 {
			width: 100%;
		}
		
		.wxlogo {
			position: fixed;
			width: 80rpx;
			height: 80rpx;
			top: calc((100vh - 80rpx) / 2);
			right: 20rpx;
			z-index: 1000;
		}
	}
</style>
